<template>
  <a-layout-header style="background: #fff; padding: 15px;display:flex;justify-content: space-between;"
    line-height="32px">
    <div>
      <menu-unfold-outlined v-if="main.collapsed" class="trigger" @click="() => (main.collapsed = !main.collapsed)" />
      <menu-fold-outlined v-else class="trigger" @click="() => (main.collapsed = !main.collapsed)" />
    </div>
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        头像
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item @click="indexManage()">
            <UserOutlined />
            <span>个人资料</span>
          </a-menu-item>
          <a-menu-item>
            <LogoutOutlined />
            <a href="javascript:;">退出登录</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-layout-header>
  <a-drawer :width="500" title="个人信息" placement="right" :open="open" @close="onClose">
    <template #extra>
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onClose">提交修改</a-button>
    </template>
    <div class="PhotoBox">
      <div class="headPhoto">
        <div>头像:</div>
        123
      </div>
      <div>
        <div>头像:</div>
        123
      </div>
      <div>
        <div>头像:</div>
        123
      </div>
      <div>
        <div>头像:</div>
        123
      </div>
      <div>
        <div>头像:</div>
        123
      </div>
      <div>
        <div>头像:</div>
        123
      </div>
    </div>

  </a-drawer>
</template>

<script setup>
import { ref } from 'vue';
import { DownOutlined, LogoutOutlined, UserOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
import { useMainStore } from '@/store'
const main = useMainStore()
const open = ref(false);
const indexManage = () => {
  open.value = true
}
const onClose = () => {
  open.value = false
}
</script>

<style scoped>
.ant-layout-header {
  line-height: 32px;
  font-size: 20px;
}
.PhotoBox {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.PhotoBox > div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  padding-bottom: 10px;
}
</style>